<template>
  <!-- 页面布局 -->
  <div>
    <el-container>
      <el-header height="65px" :style="{ 'border-bottom': '1px solid #ccc' }">
        <!-- 头部按钮 -->
        <el-row type="flex" justify="end" style="background-color: rgb(211, 227, 253)">
          <div>
            <el-button @click="searchButton" type="primary"> 查询</el-button>
          </div>
          <!-- <div class="title">需求汇总统计表</div> -->
        </el-row>
        <!-- style="text-align: center" -->
        <!-- background:rgb(241,244,243) ; -->
        <div
          style="margin-left:6rem;height: 30px;width=100%; background:rgb(241,244,243);margin-bottom: 0;position: relative; display: flex; justify-content: flex-start;"
        >
          <el-input
            style="width: 10%; height: 25px; margin-left: 2px; margin-top: 2px"
            v-model="single_id"
            placeholder="周期码"
          >
            <template #prefix>
              <el-icon class="">
                <search />
              </el-icon>
            </template>
          </el-input>
          <el-input
            style="width: 10%; height: 25px; margin-left: 2px; margin-top: 2px"
            v-model="bus_oper_name"
            placeholder="业务操作名称"
          >
            <template #prefix>
              <el-icon class="">
                <search />
              </el-icon>
            </template>
          </el-input>
        </div>
      </el-header>
      <el-container>
        <el-container>
          <el-main style="padding: 2px 2px 0 2px; margin-left: 6rem">
            <el-table
              v-loading="loading"
              ref="table"
              :data="tableData"
              border
              stripe
              :cell-style="cellStyle"
              :header-cell-style="headerCellStyle"
              @selection-change="handleSelectionChange"
              @row-dblclick="handleRowClick"
              @row-click="RowClick"
              :row-style="rowState"
              :row-key="(row:any) => row.autoid"
              :max-height="screenHeight"
              :height="screenHeight"
              :show-overflow-tooltip="true"
              :summary-method="getSummaries"
              show-summary
              virtual-scroll
            >
              <el-table-column fixed type="index" width="60" align="center" />
              <el-table-column fixed type="selection" width="50" align="center" />
              <!-- <el-table-column
                fixed
                prop="single_id"
                label="单件ID"
                width="100"
                align="center"
              />
              <el-table-column
                fixeds
                prop="reg_sign"
                label="登记标志"
                width="80"
                align="center"
              /> -->
              <!-- <el-table-column
                fixed
                prop="row_num"
                label="序号"
                width="80"
                align="center"
              /> -->
              <el-table-column
                prop="oper_datetime"
                label="数据时间"
                width="180"
                align="center"
              />
              <!-- <el-table-column
                prop="bus_id"
                label="业务名称id"
                width="80"
                align="center"
              /> -->
              <el-table-column
                prop="bus_name"
                label="业务名称"
                width="100"
                align="center"
              />
              <!-- <el-table-column
                prop="bus_oper_id"
                label="业务操作id"
                width="80"
                align="center"
              /> -->

              <el-table-column
                prop="bus_oper_name"
                label="业务操作名称"
                width="100"
                align="center"
              />

              <!-- <el-table-column
                prop="bus_info_t_id"
                label="业务主表ID"
                width="80"
                align="center"
              /> -->
              <!-- <el-table-column
                prop="bus_info_t_name"
                label="业务主表"
                width="150"
                align="center"
              /> -->

              <!-- <el-table-column
                prop="bus_info_f_name"
                label="业务主表关联字段"
                width="80"
                align="center"
              />
              <el-table-column
                prop="bus_info_f_val"
                label="业务主表关联字段值"
                width="80"
                align="center"
              />
              <el-table-column
                prop="bus_entity_t_id"
                label="业务子表ID"
                width="80"
                align="center"
              />
              <el-table-column
                prop="bus_entity_t_name"
                label="业务子表"
                width="180"
                align="center"
              />
              <el-table-column
                prop="bus_entity_f_name"
                label="业务子表关联字段"
                width="120"
                align="center"
              />
              <el-table-column
                prop="bus_entity_f_val"
                label="业务子表关联字段值"
                width="130"
                align="center"
              /> -->
              <el-table-column
                prop="oi_code"
                label="业务主表单据编号"
                width="120"
                align="center"
              />
              <el-table-column
                prop="oi_f_date"
                label="业务主表单据日期"
                width="120"
                align="center"
              />
              <!-- <el-table-column
                prop="oi_f_type"
                label="业务主表业务类型"
                width="120"
                align="center"
              /> -->
              <el-table-column
                prop="oi_f_type_name"
                label="业务主表业务类型"
                width="200"
                align="center"
              />
              <!-- <el-table-column
                prop="oi_p_type"
                label="业务主表工单类型"
                width="120"
                align="center"
              /> -->
              <el-table-column
                prop="oi_p_type_name"
                label="业务主表工单类型"
                width="150"
                align="center"
              />
              <!-- <el-table-column
                prop="oi_ng_state_code"
                label="业务主表不良状态码"
                width="130"
                align="center"
              /> -->
              <el-table-column
                prop="oi_ng_state_name"
                label="业务主表不良状态"
                width="130"
                align="center"
              />
              <!-- <el-table-column
                prop="oi_ng_judge_type_code"
                label="业务主表不良判定类型码"
                width="160"
                align="center"
              /> -->
              <el-table-column
                prop="oi_ng_judge_type_name"
                label="业务主表不良判定类型"
                width="160"
                align="center"
              />
              <!-- <el-table-column
                prop="oi_ng_dispose_war_code"
                label="业务主表不良处理方式码"
                width="160"
                align="center"
              /> -->

              <el-table-column
                prop="oi_ng_dispose_war_name"
                label="业务主表不良处理方式"
                width="160"
                align="center"
              />
              <!-- <el-table-column
                prop="oi_oper_mode_code"
                label="业务主表加工方式码"
                width="160"
                align="center"
              /> -->
              <el-table-column
                prop="oi_oper_mode"
                label="业务主表加工方式"
                width="160"
                align="center"
              />
              <!-- <el-table-column
                prop="oi_demarcate_num"
                label="业务主表标定次数"
                width="160"
                align="center"
              /> -->
              <el-table-column
                prop="oi_used_num"
                label="业务主表已耗用次数"
                width="160"
                align="center"
              />
              <!-- <el-table-column
                prop="oi_oper_equipment_id"
                label="业务作业设备id"
                width="160"
                align="center"
              /> -->
              <el-table-column
                prop="oi_oper_equipment_name"
                label="业务作业设备名称"
                width="160"
                align="center"
              />
              <el-table-column
                prop="oi_oper_date"
                label="业务作业日期"
                width="160"
                align="center"
              />
              <!-- <el-table-column
                prop="oi_oper_shift"
                label="业务作业班别"
                width="160"
                align="center"
              /> -->
              <el-table-column
                prop="oi_oper_shift_name"
                label="业务作业班别名称"
                width="160"
                align="center"
              />
              <!-- <el-table-column
                prop="oi_oper_team_id"
                label="业务作业班组id"
                width="160"
                align="center"
              /> -->
              <el-table-column
                prop="oi_oper_team_name"
                label="业务作业班组名称"
                width="160"
                align="center"
              />
              <!-- <el-table-column
                prop="oi_oper_person_id"
                label="业务作业人员id"
                width="160"
                align="center"
              /> -->
              <el-table-column
                prop="oi_oper_person_name"
                label="业务作业人员姓名"
                width="160"
                align="center"
              />
              <!-- <el-table-column
                prop="oi_create_person_id"
                label="业务制单人"
                width="160"
                align="center"
              /> -->
              <el-table-column
                prop="oi_create_person_name"
                label="业务制单人名称"
                width="160"
                align="center"
              />
              <el-table-column
                prop="oi_create_datatime"
                label="业务制单时间"
                width="180"
                align="center"
              />
              <el-table-column
                prop="oi_ratify_person_id"
                label="业务签批人"
                width="120"
                align="center"
              />
              <el-table-column
                prop="oi_ratify_person_name"
                label="业务签批姓名"
                width="120"
                align="center"
              />
              <el-table-column
                prop="oi_ratify_datetime"
                label="业务签批时间"
                width="180"
                align="center"
              />
              <!-- <el-table-column
                prop="oi_modify_person_id"
                label="业务修改人"
                width="100"
                align="center"
              /> -->
              <el-table-column
                prop="oi_modify_person_name"
                label="业务修改人名称"
                width="120"
                align="center"
              />
              <el-table-column
                prop="oi_modify_datetime"
                label="业务修改时间"
                width="180"
                align="center"
              />
              <el-table-column
                prop="oi_verify_person_id"
                label="业务审核人"
                width="100"
                align="center"
              />
              <el-table-column
                prop="oi_verify_person_name"
                label="业务审核人名称"
                width="120"
                align="center"
              />
              <!-- <el-table-column
                prop="latest_ps_id"
                label="当前最新磨削工艺标准"
                width="160"
                align="center"
              />
              <el-table-column
                prop="default_ps_id"
                label="当前默认加工工艺标准"
                width="160"
                align="center"
              />
              <el-table-column
                prop="report_ps_id"
                label="当前默认统计工艺标准"
                width="160"
                align="center"
              /> -->
              <el-table-column
                prop="oe_actual_de_quantity"
                label="业务本次实际外径"
                width="160"
                align="center"
              />
              <el-table-column
                prop="oe_actual_ra_quantity"
                label="业务本次实际粗糙度"
                width="160"
                align="center"
              />
              <el-table-column
                prop="oe_actual_consume_quantity"
                label="业务本次实际耗用数量"
                width="160"
                align="center"
              />
              <el-table-column
                prop="oe_actual_grind_quantity"
                label="业务本次实际磨削数量"
                width="160"
                align="center"
              />
              <el-table-column
                prop="oe_actual_cone_height"
                label="业务本次实际锥高"
                width="160"
                align="center"
              />
              <el-table-column
                prop="oe_actual_cone_lenght"
                label="业务本次实际锥长"
                width="160"
                align="center"
              />
              <el-table-column
                prop="c_stan_outside_diameter"
                label="业务本次标准外径"
                width="160"
                align="center"
              />
              <el-table-column
                prop="c_stan_roughness"
                label="业务本次标准粗糙度"
                width="160"
                align="center"
              />
              <el-table-column
                prop="c_stan_roughness_lower"
                label="业务本次标准粗糙度公差下限"
                width="200"
                align="center"
              />
              <el-table-column
                prop="c_stan_roughness_upper"
                label="业务本次标准粗糙度公差上限"
                width="200"
                align="center"
              />
              <el-table-column
                prop="c_stan_grind_quantity"
                label="业务本次标准磨削数量"
                width="160"
                align="center"
              />
              <el-table-column
                prop="c_stan_grind_quantity_lower"
                label="业务本次标准磨削数量公差下限"
                width="200"
                align="center"
              />
              <el-table-column
                prop="c_stan_grind_quantity_upper"
                label="业务本次标准磨削数量公差上限"
                width="200"
                align="center"
              />
              <el-table-column
                prop="c_stan_cone_height"
                label="业务本次标准锥高"
                width="160"
                align="center"
              />
              <el-table-column
                prop="c_stan_cone_height_lower"
                label="业务本次标准锥高公差下限"
                width="200"
                align="center"
              />
              <el-table-column
                prop="c_stan_cone_height_upper"
                label="业务本次标准锥高公差上限"
                width="200"
                align="center"
              />
              <el-table-column
                prop="c_stan_cone_lenght"
                label="业务本次标准锥长"
                width="160"
                align="center"
              />
              <el-table-column
                prop="c_stan_cone_lenght_lower"
                label="业务本次标准锥长公差下限"
                width="200"
                align="center"
              />
              <el-table-column
                prop="c_stan_cone_lenght_upper"
                label="业务本次标准锥长公差上限"
                width="200"
                align="center"
              />
              <el-table-column
                prop="c_stan_cone_consume"
                label="业务本次标准耗用量"
                width="160"
                align="center"
              />
              <el-table-column
                prop="c_stan_cone_consume_lower"
                label="业务本次标准耗用公差下限"
                width="200"
                align="center"
              />
              <el-table-column
                prop="c_stan_cone_consume_upper"
                label="业务本次标准耗用公差上限"
                width="200"
                align="center"
              />
            </el-table>
          </el-main>

          <el-footer style="height: 20px">
            <div class="demo-pagination-block">
              <el-pagination
                v-model:current-page="page"
                v-model:page-size="limit"
                :page-sizes="[50, 500, 1000, 1500, 2000, 8000]"
                :small="true"
                :background="true"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
              />
            </div>
          </el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>
<script setup lang="ts">
import {
  ref,
  watch,
  reactive,
  onMounted,
  onBeforeMount,
  computed,
  nextTick,
  onUnmounted,
  toRefs,
} from "vue";
import { ElTable, TableColumnCtx } from "element-plus";
import { Delete, Edit, Search, Share, Upload, Calendar } from "@element-plus/icons-vue";
import { ElButton, ElDialog, dialogEmits, ElMessage } from "element-plus";
import { CircleCloseFilled } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
import axios from "../../../axios/axiosInstance.ts";
import Cookies from "js-cookie";
import { formatNumberToCurrency } from "@/utils/formatUtils";
// crud封装组件
import * as crud from "../../../components/utils/crud.ts";
import SearchTableDialog from "@/components/dialogs/SearchTableDialog.vue";
import * as notifications from "../../../components/utils/notification.ts";
import Co from "../../../components/utils/t-ui-plus-dev/packages/select-table/src/index.vue";
// 日期中文
import zhCn from "element-plus/dist/locale/zh-cn.mjs";
const router = useRouter();
// 权限控制
const searchButtonPermissions11 = ref(false);
const menuId = ref(11);
const buttonVariables = {
  searchButtonPermissions11,
};
const selectPermissionsButton = () => {
  const userName = Cookies.get("userName");

  axios({
    url: "/select/Permissions/Button",
    method: "post",
    data: {
      userName: userName,
      menuId: menuId.value,
    },
  }).then((res) => {
    res.data.forEach((button) => {
      const buttonName = button.buttonName;
      if (buttonVariables.hasOwnProperty(buttonName)) {
        buttonVariables[buttonName].value = true;
      }
    });
  });
};
selectPermissionsButton();

// 计算高度
const screenHeight = ref(null);

const getScreenHeight = () => {
  console.log(window.innerHeight);
  screenHeight.value = window.innerHeight - 146 - 42 + 55;
};
getScreenHeight();
// 表格
const formatCurrency = (row, column) => {
  if (column.property === "zs" || column.property === "je") {
    return formatNumberToCurrency(row[column.property]);
  }

  // 如果不是金额或总数列，保持原样
  return row[column.property];
};
// 背景色

// 分页
const page = ref(1);
const limit = ref(50);
const total = ref(50);
const loading = ref(false);
const single_id = ref("");
const bus_oper_name = ref("");

const handleSizeChange = (val: number) => {
  searchButton();
};
const handleCurrentChange = (val: number) => {
  searchButton();
};
// Main表格
const tableData = ref([]);
const searchButton = () => {
  loading.value = true;
  tableData.value = [];
  const userName = Cookies.get("userName");
  if (!userName) {
    router.push("/");
    return;
  }
  axios({
    url: "/PshoReport/getList",
    method: "post",
    data: {
      info: {
        single_id: single_id.value,
        bus_oper_name: bus_oper_name.value,
      },
      pageInfo: {
        page: page.value,
        limit: limit.value,
      },
    },
  }).then((res) => {
    console.log(res.data.info);
    if (res.data.info.length == 0) {
      total.value = 0;
      tableData.value = [];
      loading.value = false;
      return;
    }
    tableData.value = res.data.info;
    total.value = res.data.info[0].total;
    loading.value = false;
  });
};
searchButton();
// const input1 = ref('')
// 合计行

interface SummaryMethodProps<T = Product> {
  columns: TableColumnCtx<T>[];
  data: T[];
}
const getSummaries = (param: SummaryMethodProps) => {
  const { columns, data } = param;
  const sums: string[] = [];
  columns.forEach((column, index) => {
    if (index === 0) {
      sums[index] = "合计:";

      return;
    }
    return;
    if (column.property === "id") {
      return;
    }
    if (column.property === "fabh") {
      return;
    }
    if (column.property === "cz") {
      return;
    }
    if (column.property === "hd") {
      return;
    }
    if (column.property === "kd") {
      return;
    }
    if (column.property === "dwjs") {
      return;
    }
    if (column.property === "wlbm") {
      return;
    }
    if (column.property === "wlmc") {
      return;
    }
    if (column.property === "wlgg") {
      return;
    }
    if (column.property === "bzsl") {
      return;
    }
    if (column.property === "bzdj") {
      return;
    }
    if (column.property === "bzList") {
      return;
    }
    const values = data.map((item) => Number(item[column.property]));
    if (!values.every((value) => Number.isNaN(value))) {
      sums[index] = ` ${values.reduce((prev, curr) => {
        const value = Number(curr);
        if (!Number.isNaN(value)) {
          return prev + curr;
        } else {
          return prev;
        }
      }, 0)}`;
    } else {
      sums[index] = "";
    }
  });
  for (let hj = 0; hj < sums.length; hj++) {
    var val = sums[hj];
    // !isNaN(parseFloat(value)) && isFinite(value);
    if (!isNaN(parseFloat(val)) && isFinite(val)) {
      sums[hj] = parseFloat(sums[hj]).toFixed(2);
      sums[hj] = formatNumberToCurrency(sums[hj]); // 千分位格式化

      continue;
    }
  }

  return sums;
};
// 弹窗
// 修改弹窗
const buttonText = ref("添加用途分类");

const handleAction1 = () => {
  dialogVisible3.value = false;
  dialogVisible4.value = false;
};
interface Tree {
  label: string;
  children?: Tree[];
}
// 每次点击侧边栏，树状结构触发，修改表格内容
const flmc = ref("");

// 头部按钮
const selectedRows = ref([]);
const table = ref();
const rowTable = ref([]);
const dialogVisible3 = ref(false);
const dialogVisible4 = ref(false);

const formAsid = ref({
  id: "",
  ytflbh: "",
  flmc: "",
  state: true,
  remark: "",
  level: "",
  ytfl: "",
} as any);
const formRight = ref({
  ytbm: "",
  ytfl: "",
  ytmc: "",
  state: "",
  remark: "",
} as any);

const handleSelectionChange = (selection: any) => {
  selectedRows.value = selection;
};

// // 设置表头样式
const headerCellStyle = {
  // E9E9E7
  borderColor: "#B9C9C7",
  backgroundColor: "#F2F4FA", // 表头背景颜色
  fontWeight: "bold", // 表头文字粗细
  color: "#1F2129",
  // padding: "0 0 0 30px",
};
const rowState = (arg) => {
  return {
    height: "20px", // 设置合适的行高值
    fontSize: "12px", // 设置合适的字体大小值
    // color: "black",
  };
};
const RowClick = (row, selection) => {
  // 主表点击
  table.value.toggleRowSelection(row);
};

const cellStyle = ({ row, column, rowIndex, columnIndex }) => {
  if (selectedRows.value.find((selectedRow) => selectedRow.autoid == row.autoid)) {
    return {
      backgroundColor: "#DFF0DB !important",
      borderColor: "#B9C9C7",
      padding: "4px",
    };
  } else {
    // #E9E9E7
    // D9D9D7   C9C9C7 A9A9A7

    return { borderColor: "#B9C9C7", padding: "4px", margin: 0 };
  }
};
</script>
<style scoped>
/* 悬停 */
/* #f9f9fc, #fef5f0 */
.el-table {
  /* --el-table-row-hover-bg-color: rgba(0, 158, 250, 0.219) !important; */
  /* --el-table-row-hover-bg-color: #fef5f0 !important; */
  --el-table-row-hover-bg-color: rgba(254, 245, 240, 0.8) !important;
}
/* 选中 */
.el-table {
  /* --el-table-row-hover-bg-color: #fef5f0 !important; */
  --el-table-row-hover-bg-color: rgba(254, 245, 240, 0.8) !important;
}

.custom-dialog {
  position: fixed;
  top: 12%;
  left: 50%;
  width: 20%;
  /* 其他样式... */
}
.vertical-line {
  width: 1px;
  height: 100%; /* 让竖线的高度与整个页面高度一致 */
  background-color: #d3d5d7; /* 分割线的颜色，可以根据你的需求修改 */
  position: fixed;
  top: 8.5%;
  bottom: 0;
  /* left: 13%; */
  left: 19.99%;
  transform: translateX(-50%);
}
.vertical-line1 {
  width: 1px;
  height: 100%; /* 让竖线的高度与整个页面高度一致 */
  background-color: #d3d5d7; /* 分割线的颜色，可以根据你的需求修改 */
  position: fixed;
  top: 8.5%;
  bottom: 0;
  right: 20%; /* 将竖线放置在页面中间 */
  transform: translateX(-50%);
}
.vertical-line2 {
  width: 100%; /* 让横线的宽度与整个页面宽度一致 */
  height: 2px;
  background-color: #d3d5d7; /* 横线的颜色，可以根据你的需求修改 */
  position: fixed;
  top: 8.5%; /* 设置横线的垂直位置，可以根据你的布局调整 */
}
.vertical-line3 {
  width: 100%; /* 让横线的宽度与整个页面宽度一致 */
  height: 1px;
  background-color: #d3d5d7; /* 横线的颜色，可以根据你的需求修改 */
  position: fixed;
  top: 4.5%; /* 设置横线的垂直位置，可以根据你的布局调整 */
  left: 0%;
}

/* 侧边树状 */
::v-deep .el-tree-node__content {
  /* height: 45px; */
  height: 4vh;
  line-height: inherit;
}
.title {
  font-size: 18px;
}
.demo-pagination-block {
  float: right;
}
::v-deep .el-table .cell {
  padding: 0;
}
::v-deep .el-header {
  padding: 0;
}
.flex-grow {
  flex-grow: 1;
}
.demo-basic .block:not(:last-child) {
  border-right: 1px solid var(--el-border-color);
}
.demo-basic .block {
  flex: 1;
}
</style>
